<template>
  <div>aaaa</div>
  <div>{{ storeUser.$state }}</div>

	<hr>
	<button @click="aaaComponent_show = !aaaComponent_show">显示隐藏{{aaaComponent_show}}</button>
	<br>
	<keep-alive>
		<aaaComponent v-if="aaaComponent_show"></aaaComponent>
	</keep-alive>
	<hr>
	
	<div>{{ aaa_list }}</div>
	<hr>
	
	<div>time：{{ time }}</div>
</template>


<script lang="ts">
export default {
  name: "Aaa",
};
</script>

<script setup lang="ts">
import { onMounted, onActivated, getCurrentInstance, ref, reactive, toRefs } from "vue";
import store_user from "@/store/user";
import store_aaa from "@/store/aaa";
import { useRoute } from "vue-router";
import { onBeforeRouteLeave } from 'vue-router'
import aaaComponent from '@/views/aaaComponent.vue'

// import aaa from "./aaa.js";
// console.log(aaa, 2222)
import('./aaa.js').then(res => {
  console.log(res.default());
})

onBeforeRouteLeave((to, from, next)=>{
	console.log('onBeforeRouteLeave', to, from);
	// window.history.forward()
	next()
})


let { proxy: _this } = getCurrentInstance() as any;
console.log( _this );

let aaaComponent_show = ref(true)

let storeUser = store_user()
let storeAaa = store_aaa()


const route = useRoute();
console.log(route.meta, 11111222111222111);

let aaa_list: any = ref({})
let time = reactive({
	date: new Date()
})
console.log( aaa_list, 555 );
onMounted(async () => {
  console.log('onMounted');
	// aaa_list = ref([])
	
	let list = [
		storeAaa.getUserinfo(1000),
		storeAaa.getUserinfo(2000),
		storeAaa.getUserinfo(3000)
	]
	Promise.all(list).then(res=>{
		console.log(res, 111);
		// aaa_list[0] = 1111
		// aaa_list = toRefs(res)
		aaa_list.value.aaa = 1222
		console.log( aaa_list );
		
		time.date = new Date()
		console.log('time', time );
	})
})

onActivated(() => {
  console.log('onActivated');
})

</script>

<style lang="scss" scoped>

</style>